<!-- TodoList.vue - 待办事项列表组件 -->
<!-- 
  这是应用的核心功能组件，实现了待办事项的增删改查功能。
  主要功能：
  1. 显示所有待办事项
  2. 添加新的待办事项
  3. 标记待办事项为已完成/未完成
  4. 删除待办事项
-->

<template>
  <!-- 主容器：使用卡片式布局 -->
  <div class="todo-container">
    <h1 class="title">Todo List</h1>

    <div class="input-group">
      <input
        v-model="newTodoTitle"
        placeholder="添加新的待办事项"
        @keyup.enter="addTodo"
        class="todo-input"
      />
      <button @click="addTodo" class="add-btn">添加</button>
    </div>

    <!-- 待办事项列表 -->
    <ul class="todo-list">
      <!-- 使用 v-for 指令循环渲染每个待办事项 -->
      <li v-for="todo in todos" :key="todo.id" class="todo-item">
        <div class="todo-content">
          <!-- 复选框：用于标记待办事项的完成状态 -->
          <input
            type="checkbox"
            :checked="todo.completed"
            @change="toggleTodo(todo)"
            class="todo-checkbox"
          />
          <!-- 待办事项文本，使用动态类名显示完成状态 -->
          <span :class="{ completed: todo.completed }" class="todo-text">{{ todo.title }}</span>
        </div>
        <button @click="deleteTodoHandler(todo.id)" class="delete-btn">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 从 Vue 中导入所需的组合式 API 函数
import { ref, onMounted } from 'vue'
// 导入待办事项相关的 API 服务
import { getAllTodos, createTodo, updateTodo, deleteTodo } from '../services/todoService'

// 使用 ref 创建响应式数据
const todos = ref([]) // 存储所有待办事项的数组
const newTodoTitle = ref('') // 存储新待办事项的标题

// 获取所有待办事项的函数
const fetchTodos = async () => {
  try {
    const data = await getAllTodos()
    todos.value = data
  } catch (error) {
    console.error('Error fetching todos:', error)
  }
}

// 添加新待办事项的函数
const addTodo = async () => {
  // 如果输入为空，则不添加
  if (newTodoTitle.value.trim() === '') return
  try {
    // 创建新的待办事项对象
    const newTodo = { title: newTodoTitle.value, completed: false }
    // 调用 API 保存到后端
    const createdTodo = await createTodo(newTodo)
    // 将新创建的待办事项添加到列表中
    todos.value.push(createdTodo)
    // 清空输入框
    newTodoTitle.value = ''
  } catch (error) {
    console.error('Error creating todo:', error)
  }
}

// 切换待办事项完成状态的函数
const toggleTodo = async (todo) => {
  try {
    // 创建更新后的待办事项对象，切换完成状态
    const updatedTodo = { ...todo, completed: !todo.completed }
    // 调用 API 更新后端数据
    const result = await updateTodo(todo.id, updatedTodo)
    // 在列表中更新对应的待办事项
    const index = todos.value.findIndex((t) => t.id === todo.id)
    todos.value[index] = result
  } catch (error) {
    console.error('Error updating todo:', error)
  }
}

// 删除待办事项的函数
const deleteTodoHandler = async (id) => {
  try {
    // 调用 API 从后端删除数据
    await deleteTodo(id)
    // 从列表中移除对应的待办事项
    todos.value = todos.value.filter((todo) => todo.id !== id)
  } catch (error) {
    console.error('Error deleting todo:', error)
  }
}

// 组件挂载时获取待办事项列表
onMounted(() => {
  fetchTodos()
})
</script>

<style scoped>
/* 主容器样式：居中显示的卡片布局 */
.todo-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

/* 输入区域样式：弹性布局 */
.input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* 输入框样式 */
.todo-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

/* 输入框焦点样式 */
.todo-input:focus {
  outline: none;
  border-color: #4299e1;
}

/* 添加按钮样式 */
.add-btn {
  padding: 0.75rem 1.5rem;
  background-color: #4299e1;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 添加按钮悬停效果 */
.add-btn:hover {
  background-color: #3182ce;
}

/* 待办事项列表样式 */
.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 待办事项样式 */
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: #f7fafc;
  border-radius: 8px;
  transition: transform 0.2s;
}

/* 待办事项悬停效果 */
.todo-item:hover {
  transform: translateX(4px);
}

/* 待办事项内容区域样式 */
.todo-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 复选框样式 */
.todo-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

/* 待办事项文本样式 */
.todo-text {
  font-size: 1rem;
  color: #2d3748;
}

/* 已完成待办事项文本样式 */
.todo-text.completed {
  text-decoration: line-through;
  color: #a0aec0;
}

/* 删除按钮样式 */
.delete-btn {
  padding: 0.5rem 1rem;
  background-color: #fc8181;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 删除按钮悬停效果 */
.delete-btn:hover {
  background-color: #f56565;
}
</style>